<!--
 * @Author: your name
 * @Date: 2022-03-25 11:39:22
 * @LastEditTime: 2022-03-29 09:14:24
 * @LastEditors: Please set LastEditors
 * @Description: 客服
 * @FilePath: /phytotherapy-vue/Users/zhouqiang/file/grass/phytotherapy/phytotherapy-weapp/packages/personal/customerService/index.vue
-->
<template>
  <view class="chat-container font-size">
    <scroll-view class="chat-content" style="height: 70vh" :scroll-y="true" :scroll-with-animation="true"
                 :scroll-top="scrollTop">
      <view class="content-card" v-for="(item, index) in chatList" :key="index"
            :class="{ 'card-content-2': item.contType == 1 }">
        <view class="card-left">
          <view class="card-image" v-if="item.contType != 1">
            <image :src="item.sendPersonAvatar" mode="aspectFill "></image>
          </view>
        </view>
        <view class="content-container">
          <view class="user-name" v-if="item.contType != 1">{{ item.userName }}</view>
          <view class="card-center">
            <view class="arrow-content"></view>
            <!-- 纯文本内容 -->
            <view class="card-txt" v-if="item.contType == 1" v-html="item.content"></view>
            <!-- 链接内容 -->
            <view class="card-href" v-if="item.contType != 1">
              <view class="card-txt" v-html="item.content"></view>
            </view>
          </view>
        </view>

        <view class="card-right">
          <view class="card-image" v-if="item.contType == 1">
            <image :src="item.sendPersonAvatar" mode="aspectFill "></image>
          </view>
        </view>
      </view>

      <!-- 加载动画 -->
      <view class="content-loading" v-show="loading">加载中···</view>
    </scroll-view>
    <view class="chat-tools">
      <view class="tools-textarea">
        <view class="tools-left"></view>
        <view class="tools-center">
          <ZTextarea
              v-model="inputNumber"
              @change="textareaChange"
              @focus="focusHandle"
              confirmType="send"
              :focus="isFocus"
              :confirmHold="true"
              :minHeight="40"
              :maxHeight="120"
              placeholder="请输入"
              ref="inputRef"
          ></ZTextarea>
        </view>
        <view class="tools-right">
          <!-- 发送 -->
          <view class="right-send" @click="textareaChange(inputNumber)">发 送</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ZTextarea from "@/compontent/z-textarea/index.vue";
import {requestGet, requestPost} from "@/until/means/request";
import {getQueryHeaders} from "@/until/userLogin";
import {getFileAccessHttpUrl} from "@/until/fileUtil";
import {defaultAvatar} from "@/until/publicConfig";

export default {
  components: {
    ZTextarea
  },
  props: {
    liaisonMessageId: {
      type: String,
      default: ''
    },
    // 首次进入是否自动获取焦点
    focus: {
      type: Boolean,
      default: true
    },
    submitUrl: {
      type: String
    },
    queryUrl: {
      type: String
    },
  },
  watch: {
    focus(val) {
      this.isFocus = val;
    }
  },
  data() {
    return {
      isFocus: this.focus,
      fontSizeCurrent: 1,
      /** chatList Array
       * @param {Number|String}    contType    内容类型： 1txt，2列表
       * @param {String}      content    发送内容
       * */
      chatList: [],
      dataList: [],
      loading: false,
      scrollTop: 0,
      inputNumber: '',
      keyboardheight: 0, // 键盘高度
      sessionId: ''
    };
  },
  mounted() {
    this.getDataList();
  },

  methods: {
    getDataList() {
      requestGet({
        url: this.queryUrl,
        data: {liaisonMessageId: this.liaisonMessageId},
        header: getQueryHeaders()
      }).then(res => {
        this.chatList = res?.messages?.map(messageItem => {
          this.sessionId = res?.sessionId
          let {id, sendContent: content, sendNickName: userName, contType = 1, sendPersonAvatar} = messageItem
          sendPersonAvatar = sendPersonAvatar != null && sendPersonAvatar !== '' ? getFileAccessHttpUrl(sendPersonAvatar) : defaultAvatar
          return {id, content, userName, contType, sendPersonAvatar}
        });
        this.$nextTick(() => {
          this.scrollToBottom();
        })
      }).catch(err => {
      });
    },
    sendMessage(sendContent) {
      let {sessionId} = this
      return new Promise((resolve, reject) => {
        requestPost({
          url: this.submitUrl,
          data: {sessionId, sendContent},
          header: getQueryHeaders()
        }).then(res => {
          resolve(res)
        }).catch(e => {
          reject()
        })
      })

    },
    focusHandle(e) {
      this.keyboardheight = String(e.detail.height);
    },
    scrollToBottom() {
      this.scrollTop = Math.random() * 10000;
    },
    sendContent(messageItem) {
      if (!messageItem) return;
      this.chatList.push(messageItem);
      this.scrollToBottom();
    },
    textareaChange(val) {
      if (!val) return;
      let owner = this
      this.sendMessage(this.inputNumber).then(res => {
        let {id, sendContent: content = owner.inputNumber, sendNickName: userName, sendPersonAvatar} = res
        sendPersonAvatar = sendPersonAvatar != null && sendPersonAvatar !== '' ? getFileAccessHttpUrl(sendPersonAvatar) : defaultAvatar
        owner.sendContent({id, content, userName, contType: 1, sendPersonAvatar});
        this.inputNumber = ''
        owner.$refs.inputRef.clearContent()
      })
    }
  }
};
</script>

<style lang="scss">
@import 'index';
@import 'fontSize';
</style>
